<template>
  <div id="app">
    <header>
      <h1>2024待办事项</h1>
      <form @submit.prevent="addTask">
        <input type="text" v-model="newTask" placeholder="把计划写下来吧?" />
        <button type="submit">Add Task</button>
      </form>
    </header>
    <main>
      <section class="task-list">
        <h2>任务列表</h2>
        <div id="tasks">
          <div v-for="(task, index) in tasks" :key="index" class="task">
            <div class="content">
              <input type="text" v-model="task.task" :readonly="task.readonly" />
            </div>
            <div class="actions">
              <button @click="editTask(task)">{{ task.readonly ? 'Edit' : 'Save' }}</button>
              <button @click="deleteTask(index)">Delete</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      newTask: ''
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ task: this.newTask, readonly: true });
        this.newTask = '';
      }
    },
    editTask(task) {
      task.readonly = !task.readonly;
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>
<style>
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Arial', sans-serif;
  color: #333;
  background-color: #f0f0f0;
}

header {
  padding: 1.5rem;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background-color: #4A90E2;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
}

form {
  display: flex;
  margin-top: 1rem;
}

input[type="text"] {
  flex: 1;
  background-color: #ffffff;
  padding: 0.8rem;
  border-radius: 5px;
  margin-right: 0.5rem;
  color: #333;
  font-size: 1rem;
  border: 1px solid #ccc;
  transition: border 0.3s;
}

input[type="text"]:focus {
  border-color: #4A90E2;
}

button {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  background-color: #E94E77;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #D43E67;
}

.task-list {
  padding: 1rem;
  margin-top: 1rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
}

.task {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.content {
  flex: 1;
  color: #666;
}

input[type="text"] {
  color: #333;
  font-size: 1rem;
  width: 100%;
  display: block;
}

.actions {
  display: flex;
  margin-left: 0.5rem;
}

button {
  margin-left: 0.5rem;
}

.edit {
  background-color: #F5A623;
}

.delete {
  color: #D0021B;
}
</style>